<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<style type="text/css">
			html, body{
				background: #fff;
			}
			.mui-content-padded,.mui-content-time{
				margin:5px 10px 0px 10px;	
			}
			.mui-content-time span{
				color:#000;/*#9fa41c;*/
				/*font-weight: 700;*/
			}
			.mui-huodong-list{
				float: left;
				text-align: center;
			}
			.mui-huodong-list p{
				margin:10px 0 0 0;
			}
			.mui-huodong-list:nth-child(2n){
				width:calc(50% - 20px);
				margin: 10px 10px 10px 0;
			}
			.mui-huodong-list:nth-child(2n+1){
				width:calc(50% - 10px);
				margin: 10px;
			}
			.mui-huodong-list:nth-child(n+3){
				margin-top: 0px;
			}
			.mui-huodong-list img{
				height:120px;
			}
			#mui-huodong{
				/*display: none;*/
			}
			.mui-content{
				background: #fff;
			}
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 40px;
				height: 40px;
				border-radius: 100%;
				z-index: 1;
			}
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			.mui-pull-top-wrapper {
				width: 42px;
				height: 42px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				
				margin: 0;
			}
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 40px;
				color: #777;
			}
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 40px;
				height: 40px;
				margin: 0 auto;
			}
			.mui-pull-top-canvas canvas {
				width: 40px;
			}
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			.mui-scroll,.mui-table-view{
				/*height: 100%;*/
				/*background-color: #efeff4;*/
			}
			.mui-scroll{
				/*overflow: scroll;*/
			}
			.mui-table-view-cell{
				padding: 11px 0px;
			}
			.mui-table-view-cell.mui-active{
				background: none;
			}
			.mui-action-back, .mui-icon-more-filled {
			    color: #ACACB4;
			}
			#mui-huodong .mui-huodong-list:nth-child(1),#mui-huodong .mui-huodong-list:nth-child(2){
				margin-top:0px;
			}
		</style>
	</head>

	<body>
		<div class="mui-bar mui-bar-nav">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
			<h1 class="mui-title">杂志分类</h1>
			<!--<span class="mui-icon mui-icon-more-filled mui-pull-right"></span>-->
		</div>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell" id="mui-table-view-cell1">
										<div class="mui-content mui-huodong" id="mui-huodong">
											
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.pullToRefresh.js"></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<script>
			mui.init();
			(function($) {
				//阻尼系数
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				var num = 0;
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										refreshPage();
										self.endPullDownToRefresh();
									}, 1000);
								}
							}
						});
					});
					var refreshPage = function() {
						get_terms_list(function(){
							//回调注册事件
							var mui_huodong_list = ca.className('mui-huodong-list');
							for (var i = 0, length = mui_huodong_list.length; i < length; i++) { //把每个button元素便利出来
					            var button = mui_huodong_list[i];
					            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
					                button.addEventListener("tap", add_event)
					            } else {
					                button.attachEvent("tap", add_event)
					            }
					        }
						});
					};
				});
			})(mui);
		</script>
		<script src="../js/castapp.js"></script>
		<script src="../js/myapp.js"></script>
		<script>
			ca.init();
			
			//接收通知消息
			ca.receiveNotice("shijian",function(event){
				//获取对象id
				var isLoading = event.detail.isLoading;
				if(isLoading == 1){
					//延时加载
					lazyLoading('mui-content',function(){
						//初始化数据
						get_terms_list(function(){
							//回调注册事件
							var mui_huodong_list = ca.className('mui-huodong-list');
							for (var i = 0, length = mui_huodong_list.length; i < length; i++) { //把每个button元素便利出来
					            var button = mui_huodong_list[i];
					            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
					                button.addEventListener("tap", add_event)
					            } else {
					                button.attachEvent("tap", add_event)
					            }
					        }
						});
					});
				}
				else{
					ca.className('mui-content')[0].style.display = 'block';
				}
			});
			var flag = true;
			//触发执行事件
		    function add_event(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素
		    	var thisEl = e.currentTarget;
		    	var term_id = thisEl.getAttribute('data-id');
		    	ca.newInterface({id:'zazhi_list',url:'zazhi_list.html'});
		    	//发送通知
		    	if(flag){
		    		//防止点击过快
		    		flag = false;
		    		ca.sendNotice('zazhi_list','zazhi_list',{term_id:term_id});
		    		setTimeout(function(){flag=true},500);
		    	}
		    }
			//获取活动列表信息
			function get_terms_list(callBack){
				var access_token = localStorage.getItem('access_token');
				var url = request_url+'/api/public/get_terms_list';
				ca.get({
					url:url,
					data:{
						access_token:access_token
					},
					succFn:function(res){
						var json = JSON.parse(res);
						console.log(res);
						//ca.prompt(json.msg);
						if(json.status == 1){
							var html = '';
							var result = json.result;
							for(var i in result){
								html += '<div class="mui-huodong-list" data-id="'+result[i].id+'">';
								html += '<img class="lazyloading" data-original="'+result[i].pic+'" src="'+result[i].pic+'" width="100%" />';
								html += '<p>'+result[i].name+'</p></div>';
							}
							ca.id('mui-huodong').innerHTML = html;
							callBack();
						}
						else{
							ca.prompt(json.msg);
						}
					}
				});
			}
		</script>
	</body>

</html>